.codepen-wrapper[data-codepen-id="bNZadG"] *, .codepen-wrapper[data-codepen-id="bNZadG"] *:before, .codepen-wrapper[data-codepen-id="bNZadG"] *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.codepen-wrapper[data-codepen-id="bNZadG"] body {
background: #313133;
}

.codepen-wrapper[data-codepen-id="bNZadG"] div#loader {
position: relative;
width: 160px;
height: 160px;
margin: 50px auto;
perspective: 250px;
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span:nth-child(1) {
top: 0px;
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span:nth-child(2) {
top: 40px;
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span:nth-child(3) {
top: 80px;
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span:nth-child(4) {
top: 120px;
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span {
position: absolute;
width: 100%;
left: 0;
margin-top: 20px;
transform-style: preserve-3d;
transform-origin: 80px 80px -40px;
-moz-animation: sphere-rotate 4s infinite cubic-bezier(0.7, 0, 0.3, 1);
-webkit-animation: sphere-rotate 4s infinite cubic-bezier(0.7, 0, 0.3, 1);
animation: sphere-rotate 4s infinite cubic-bezier(0.7, 0, 0.3, 1);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(1n) {
-moz-transform: translate3d(-80px, 0, -100px);
-ms-transform: translate3d(-80px, 0, -100px);
-webkit-transform: translate3d(-80px, 0, -100px);
transform: translate3d(-80px, 0, -100px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(2n) {
-moz-transform: translate3d(-40px, 0, -100px);
-ms-transform: translate3d(-40px, 0, -100px);
-webkit-transform: translate3d(-40px, 0, -100px);
transform: translate3d(-40px, 0, -100px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(3n) {
-moz-transform: translate3d(0px, 0, -100px);
-ms-transform: translate3d(0px, 0, -100px);
-webkit-transform: translate3d(0px, 0, -100px);
transform: translate3d(0px, 0, -100px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(4n) {
-moz-transform: translate3d(40px, 0, -100px);
-ms-transform: translate3d(40px, 0, -100px);
-webkit-transform: translate3d(40px, 0, -100px);
transform: translate3d(40px, 0, -100px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(5n) {
-moz-transform: translate3d(-80px, 0, -60px);
-ms-transform: translate3d(-80px, 0, -60px);
-webkit-transform: translate3d(-80px, 0, -60px);
transform: translate3d(-80px, 0, -60px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(6n) {
-moz-transform: translate3d(-40px, 0, -60px);
-ms-transform: translate3d(-40px, 0, -60px);
-webkit-transform: translate3d(-40px, 0, -60px);
transform: translate3d(-40px, 0, -60px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(7n) {
-moz-transform: translate3d(0px, 0, -60px);
-ms-transform: translate3d(0px, 0, -60px);
-webkit-transform: translate3d(0px, 0, -60px);
transform: translate3d(0px, 0, -60px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(8n) {
-moz-transform: translate3d(40px, 0, -60px);
-ms-transform: translate3d(40px, 0, -60px);
-webkit-transform: translate3d(40px, 0, -60px);
transform: translate3d(40px, 0, -60px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(9n) {
-moz-transform: translate3d(-80px, 0, -20px);
-ms-transform: translate3d(-80px, 0, -20px);
-webkit-transform: translate3d(-80px, 0, -20px);
transform: translate3d(-80px, 0, -20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(10n) {
-moz-transform: translate3d(-40px, 0, -20px);
-ms-transform: translate3d(-40px, 0, -20px);
-webkit-transform: translate3d(-40px, 0, -20px);
transform: translate3d(-40px, 0, -20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(11n) {
-moz-transform: translate3d(0px, 0, -20px);
-ms-transform: translate3d(0px, 0, -20px);
-webkit-transform: translate3d(0px, 0, -20px);
transform: translate3d(0px, 0, -20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(12n) {
-moz-transform: translate3d(40px, 0, -20px);
-ms-transform: translate3d(40px, 0, -20px);
-webkit-transform: translate3d(40px, 0, -20px);
transform: translate3d(40px, 0, -20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(13n) {
-moz-transform: translate3d(-80px, 0, 20px);
-ms-transform: translate3d(-80px, 0, 20px);
-webkit-transform: translate3d(-80px, 0, 20px);
transform: translate3d(-80px, 0, 20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(14n) {
-moz-transform: translate3d(-40px, 0, 20px);
-ms-transform: translate3d(-40px, 0, 20px);
-webkit-transform: translate3d(-40px, 0, 20px);
transform: translate3d(-40px, 0, 20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(15n) {
-moz-transform: translate3d(0px, 0, 20px);
-ms-transform: translate3d(0px, 0, 20px);
-webkit-transform: translate3d(0px, 0, 20px);
transform: translate3d(0px, 0, 20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader span i:nth-child(16n) {
-moz-transform: translate3d(40px, 0, 20px);
-ms-transform: translate3d(40px, 0, 20px);
-webkit-transform: translate3d(40px, 0, 20px);
transform: translate3d(40px, 0, 20px);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader i {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 17px;
transform-style: preserve-3d;
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader i:before, .codepen-wrapper[data-codepen-id="bNZadG"] div#loader i:after {
content: " ";
position: absolute;
background: #c1c4c9;
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: visible;
transform-style: preserve-3d;
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader i:before {
-moz-animation: sphere-rotate 4s infinite reverse cubic-bezier(0.7, 0, 0.3, 1), sphere-blur 4s infinite cubic-bezier(0.7, 0, 0.3, 1);
-webkit-animation: sphere-rotate 4s infinite reverse cubic-bezier(0.7, 0, 0.3, 1), sphere-blur 4s infinite cubic-bezier(0.7, 0, 0.3, 1);
animation: sphere-rotate 4s infinite reverse cubic-bezier(0.7, 0, 0.3, 1), sphere-blur 4s infinite cubic-bezier(0.7, 0, 0.3, 1);
}
.codepen-wrapper[data-codepen-id="bNZadG"] div#loader i:after {
-moz-animation: sphere-rotate 4s infinite reverse cubic-bezier(0.7, 0, 0.3, 1);
-webkit-animation: sphere-rotate 4s infinite reverse cubic-bezier(0.7, 0, 0.3, 1);
animation: sphere-rotate 4s infinite reverse cubic-bezier(0.7, 0, 0.3, 1);
}

@-moz-keyframes sphere-rotate {
to {
-moz-transform: rotateY(-1800deg);
transform: rotateY(-1800deg);
}
}
@-webkit-keyframes sphere-rotate {
to {
-webkit-transform: rotateY(-1800deg);
transform: rotateY(-1800deg);
}
}
@keyframes sphere-rotate {
to {
-moz-transform: rotateY(-1800deg);
-webkit-transform: rotateY(-1800deg);
transform: rotateY(-1800deg);
}
}
@-moz-keyframes sphere-blur {
40% {
box-shadow: 0 0 2px 0 #c1c4c9, 0 0 4px 0 #c1c4c9;
}
60% {
box-shadow: 0 0 2px 0 #c1c4c9, 0 0 4px 0 #c1c4c9;
}
}
@-webkit-keyframes sphere-blur {
40% {
box-shadow: 0 0 2px 0 #c1c4c9, 0 0 4px 0 #c1c4c9;
}
60% {
box-shadow: 0 0 2px 0 #c1c4c9, 0 0 4px 0 #c1c4c9;
}
}
@keyframes sphere-blur {
40% {
box-shadow: 0 0 2px 0 #c1c4c9, 0 0 4px 0 #c1c4c9;
}
60% {
box-shadow: 0 0 2px 0 #c1c4c9, 0 0 4px 0 #c1c4c9;
}
}